import { Button, DatePicker, NavBar, Input } from "antd-mobile";
import classNames from "classnames";
import { useNavigate } from "react-router-dom";
import { billListData } from "@/contants";
import "./index.scss";
import Icon from "@/components/Icon";
import { useState } from "react";
import { addBillList } from "@/store/modules/billStore";
import { useDispatch } from "react-redux";
import dayjs from "dayjs";

const New = () => {
      const navigator = useNavigate()
      // 1.准备一个控制收入支出状态
      const [billType, setBillType] = useState('pay'); // pay支出 income收入


      // 收集金额
      const [money, setMoney] = useState(0);
      const moneyChange = (value) => {
            setMoney(value)
      }

      // 收集账单
      const [useFor, setUseFor] = useState('');
      const dispatch = useDispatch();

      // 保存账单
      const saveBill = () => {
            const data = {
                  type: billType,
                  money: billType === 'pay' ? -money : +money,
                  date: currentDate,
                  useFor: useFor
            }
            dispatch(addBillList(data))
      }

      // 控制时间打开关闭
      const [dateVisible, setDateVisible] = useState(false)
      const [currentDate, setCurrentDate] = useState()
      const dateConfirm = (value) => {
            setCurrentDate(value)
            setDateVisible(false)
      }

      return <div className="keepAccounts">
            <NavBar className="nav" onBack={() => navigator(-1)}>
                  记一笔
            </NavBar>
            <div className="header">
                  <div className="kaType">
                        <Button
                              shape="rounded"
                              className={classNames(billType === 'pay' ? 'selected' : '')}
                              onClick={() => setBillType('pay')}
                        >
                              支出
                        </Button>
                        <Button
                              shape='rounded'
                              className={classNames(billType === 'income' ? 'selected' : '')}
                              onClick={() => setBillType('income')}
                        >
                              收入
                        </Button>
                  </div>
                  <div className="kaFormWrapper">
                        <div className="kaForm">
                              <div className="date">
                                    <Icon type="calendar" className="icon" />
                                    <span className="text" onClick={() => setDateVisible(true)}>{dayjs(currentDate).format('YYYY-MM-DD')}</span>
                                    <DatePicker
                                          className="kaDate"
                                          title="记账日记"
                                          max={new Date()}
                                          visible={dateVisible}
                                          onConfirm={dateConfirm}
                                    />
                              </div>
                              <div className="KaInput">
                                    <Input
                                          className="input"
                                          placeholder="0.00"
                                          type="number"
                                          value={money}
                                          onChange={moneyChange}
                                    />
                                    <span className="iconYuan">￥</span>
                              </div>
                        </div>
                  </div>
            </div>
            <div className="kaTypeList">
                  {
                        billListData[billType].map(item => {
                              return (
                                    <div className="kaType" key={item.type}>
                                          <div className="title">{item.name}</div>
                                          <div className="list">
                                                {item.list.map(item => {
                                                      return (
                                                            <div
                                                                  className={classNames('item', useFor === item.type ? 'selected' : '')}
                                                                  key={item.type}
                                                                  onClick={() => setUseFor(item.type)}
                                                            >
                                                                  <div className="icon">
                                                                        <Icon type={item.type} />
                                                                  </div>
                                                                  <div className="text">{item.name}</div>
                                                            </div>
                                                      )
                                                })}
                                          </div>
                                    </div>
                              )
                        })
                  }
            </div>
            <div className="btns">
                  <Button className="btn save" onClick={saveBill}>保存</Button>
            </div>
      </div>
}
export default New;